<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-form label-width="80px" :inline="true">

          <el-col :span="4">
            <el-form-item>
              <el-input v-model="input" placeholder="根据用户名搜索" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button size="small" @click="input=''">清除</el-button>
              <el-button type="primary" size="small" @click="search">
                搜索
              </el-button>
            </el-form-item>
          </el-col>

        </el-form>
        <el-row style="height:60px" type="flex" justify="end" align="middle">
          <el-button
            icon="el-icon-edit"
            size="small"
            type="success"
            @click="showDialog = true"
          >新增角色</el-button>
        </el-row>

        <el-alert
          :title="`共${this.counts}条数据`"
          type="info"
          :closable="false"
          show-icon
        />

        <!-- 新增角色按钮 -->
        <!-- <template >
            <el-button icon="el-icon-plus" size="small" type="primary">
              新增用户
            </el-button>
          </template> -->

        <!-- 给表格绑定数据 -->
        <el-table border :data="list">
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="120"
          />
          <el-table-column
            align="center"
            prop="email"
            label="邮箱"
            width="120"
          />
          <el-table-column
            align="center"
            prop="phone"
            label="联系电话"
            width="120"
          />
          <el-table-column
            align="center"
            prop="username"
            label="用户名"
            width="120"
          />
          <el-table-column
            align="center"
            prop="permission_group_title"
            label="权限组名称"
            width="120"
          />
          <el-table-column
            align="center"
            prop="role"
            label="角色"
            width="120"
          />
          <el-table-column align="center" label="操作">
            <template slot-scope="{ row }">
              <el-button
                size="small"
                type="primary"
                plain
                circle
                @click="editUser(row.id)"
              >
                <i class="el-icon-edit" />
              </el-button>
              <el-button
                size="small"
                type="danger"
                plain
                circle

                @click="deleteUser(row.id)"
              >
                <i class="el-icon-delete" />
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="end"
          align="middle"
          style="height: 60px;"
        >
          <!-- 分页组件 -->
          <!-- 4个属性 2个事件 -->
          <!-- 属性1：total总数 -->
          <!-- 属性2：page-size 每页条数 -->
          <!-- 属性3：current-page 当前页数 -->
          <!-- 属性4：page-sizes 每页可以有哪些条数 -->
          <!-- 事件1：current-change 页码修改事件 -->
          <!-- 事件2：size-change 每页数量修改事件 -->

          <div class="block">
            <el-pagination
              background
              :current-page="page.page"
              :page-sizes="[2, 4, 6, 8, 10]"
              :page-size="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="counts"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-row>

      </el-card>
    </div>
    <add-user ref="dd" :show-dialog="showDialog" @fff="getUsersList" />

  </div>
</template>
<script>
import { getUsersList, deleteUsers } from '@/api/user'
import addUser from './components/add-user.vue'
export default {
  name: 'Users',
  components: {
    addUser

  },
  props: {

  },
  data() {
    return {

      input: '',
      list: [],
      page: 1, // 当前页码
      // pages:6,
      counts: 0, // 总数
      pagesize: 10,
      showDialog: false

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getUsersList()
  },
  mounted() {},
  methods: {
    // 获取用户列表
    async getUsersList() {
      const { data } = await getUsersList({
        page: this.page,
        pagesize: this.pagesize
      })
      // console.log(data);
      this.list = data.list
      console.log(this.list)
      this.counts = data.counts
    },

    // 编辑用户
    editUser(id) {
      this.$refs.dd.aa = id
      this.$refs.dd.detailUser(id)
      console.log(this.$refs.dd.aa)
      this.showDialog = true
    },
    // 删除用户
    async deleteUser(id) {
      await this.$confirm('您确定删除嘛?')
      //  删除这行id
      await deleteUsers(id)
      if (this.list.length === 1 & (this.page !== 1)) {
        this.page--
      }
      // 拉取数据
      this.getUsersList()
      this.$message.success('删除成功')
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getUsersList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getUsersList()
    },
    addUserInfo() {
      this.showDialog = true
    },
    async search() {
      const { data } = await getUsersList({
        page: this.page,
        pagesize: this.pagesize,
        username: this.input
      })
      this.list = data.list
      this.counts = data.counts
    }
  }
}
</script>
<style lang="scss" scoped></style>
